<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="font_3763663_39v05ji7c1g/iconfont.css">
    <style>
        .box {
            width: 500px;
            height: 400px;
            background-color: pink;
            margin: 100px auto;
        }

        .box .nav {
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: space-evenly;
        }

        .box .nav span {
            font-size: 24px;
            cursor: pointer;
        }

        .box .nav span.active {
            color: red;
            font-size: 26px;
        }

        .box ul {
            list-style: none;
            width: 100%;
        }

        .box ul li {
            height: 30px;
            line-height: 30px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="nav">
            <span>直播</span>
            <span>视频</span>
        </div>
        <ul>
        </ul>
    </div>
</body>

</html>
<script>
    let data1 = [
        '70秒带你打卡互联网之光博览会',
        '中央部署进一步优化防疫20条措施热',
        '多地一把手：不随意扩大延长管控热',
        '殷墟考古取得新进展',
        '北漂骑手月入2万买138平新房',
        '夫妻吵架孩子独自被锁车内大哭',
        'TVB资深艺人余子明去世',
        '疯狂小杨哥称绝不避税',
        '上海一企业发生火灾致3死5伤',
        '媒体：“招弟”改名不该障碍重重'
    ]
    let data2 = [
        '韩国学生流行起梨泰院踩踏游戏',
        '多位市委书记、市长密集赴上海',
        '女童幼儿园内摔倒身亡家长发声',
        '人民网：掌掴男童者打碎自己的前程',
        '95后女生花1.96亿买下A股公司',
        '金鸡奖开幕式',
        '女子凌晨外卖被偷跪地大哭官方回应',
        '张益唐称9岁孙女有天赋已进天才班',
        '六旬男子伤害1名女性后坠桥身亡',
        '郑州富士康宿舍个人物品堆积如山',
    ]
    let ulEle = document.querySelector('.box ul')
    let btnEles = [...document.querySelectorAll('.box .nav span')]
    console.log(btnEles);
    function video_page() {
        let str = ``
        str = data1.map((item) => {
            return `<li><span class="iconfont icon-zhibo"> ${item}</span></li>`
        }).join('')
        ulEle.innerHTML = str

    }
    function live_page() {
        let str = ``
        // for (let i = 0; i < data1.length; i++){
        str = data2.map((item) => {
            return `<li><span class="iconfont icon-shipin"> ${item}</span></li>`
        }).join('')
        ulEle.innerHTML = str
    }


    btnEles.forEach((item, index) => {
        item.onclick =
        index == 0 ? function (e) {
            history.pushState({}, '', '/video')
            video_page();
            this.classList.add('active')
            btnEles[1].classList.remove('active')
        } : function (e) {
            // item.classList.remove('active')
            history.pushState({}, '', '/live')
            live_page();
            this.classList.add('active')
            btnEles[0].classList.remove('active')
        }

    })
</script>